<template>
  <div>
    <el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="form">
        <el-form-item label="始发站">
            <el-select v-model="form.startStationID" clearable placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="终点站">
            <el-select v-model="form.endStationID" clearable placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="出发时间">
            <div class="block">
                <el-date-picker
                v-model="form.travelDate"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
                </el-date-picker>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查找</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column label="编号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="trainNumber"
        header-align="center"
        align="center"
        label="车次号码">
      </el-table-column>
      <el-table-column
        prop="startStation"
        header-align="center"
        align="center"
        label="始发站">
      </el-table-column>
      <el-table-column
        prop="endStation"
        header-align="center"
        align="center"
        label="重点站">
      </el-table-column>
      <el-table-column
        prop="duration"
        header-align="center"
        align="center"
        label="总运行时长，单位分钟">
      </el-table-column>
      <el-table-column
        prop="departureTime"
        header-align="center"
        align="center"
        label="当天出发时间，HH:mm">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
  
</template>

<script>
import {timeconvert} from "@/api/timeconvert"
export default {
    data() {
      return {
        dataList: [],
        dataListLoading: false,
        labelPosition: 'right',
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        pickerOptions: {
          disabledDate(time) {
            // 购票日期：15天内
            return time.getTime() < Date.now() || time.getTime() > Date.now() +  15 * 3600 * 1000 * 24 ;
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }]
        },
        form: {
          startStationID: '',
          endStationID: '',
          travelDate: ''
        },
        options: [{
          value: '1',
          label: '北京'
        }, {
          value: '2',
          label: '保定东'
        }, {
          value: '3',
          label: '石家庄'
        }, {
          value: '4',
          label: '邯郸东'
        }, {
          value: '5',
          label: '鹤壁东'
        }],
      };
    },
    methods: {
        selectionChangeHandle (val) {
            this.dataListSelections = val
        },
        onSubmit() {
            console.log("提交的 form 为 ")
            this.form.travelDate = timeconvert(this.form.travelDate)
            console.log(this.form)
            this.$http({
                url: this.$http.adornUrl('t31-ticket/ticket/train/ticketquery'),
                method: 'post',
                // 这里要设为 false
                data: this.$http.adornData(this.form, false)
            }).then(({data}) => {
                console.log(data)
                // 修改 发布状态 的显示
                // for (let i = 0; i < this.dataList.length; i++){
                //     if (this.dataList[i].id == id) {
                //         this.dataList[i].releaseStatus = 'YES'
                //     }
                // }
                if (data && data.code === 0) {
                    // this.dataList = data.page.list
                    // this.totalPage = data.page.totalCount
                    this.dataList = data.data

                    
                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        },
        sizeChangeHandle (val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        currentChangeHandle (val) {
            this.pageIndex = val
            this.getDataList()
        },
    }
}
</script>

<style>

</style>